<template>
	<view :class="showt?'':'hidden-window'">
		<view class="coupon-list-window" :class="shows?'on':''">
			<view class="title">
				优惠券
				<text class="iconfont icon-guanbi" @click="close"></text>
			</view>
			<scroll-view :scroll-y="true" class="coupon-list" v-if="JSON.stringify(couponData) != '[]'">
				<view class="item acea-row row-center-wrapper" v-for="(item,index) in couponData" :key="index">
					<view class="money acea-row row-column row-center-wrapper" :class="item.using!=0?'bg02':'bg01'">
						<view>￥<text class="num">{{item.coupon_price}}</text></view>
						<view class="pic-num">满{{item.use_min_price}}元可用</view>
					</view>
					<view class="text">
						<view class="condition line1" :class="item.using!=0?'using':''">
							<text class="line-title" v-if="item.applicable_type==0">通用劵</text>
							<text class="line-title" v-if="item.applicable_type==1">品类券</text>
							<text class="line-title" v-if="item.applicable_type==2">商品券</text>
							<text>{{item.coupon_title}}</text>
						</view>
						<view class="data acea-row row-between-wrapper">
							<view>{{item.end_time}}前使用</view>
							<view class="bnt" :class="item.using!=0?'using':'bg-color'" @click="use(item.id,item.using)">{{item.using | using}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="noCoupon" v-else>
				<image src="../../static/images/noCoupon.png" mode=""></image>
			</view>
		</view>
		<view class="mask" @click="close"></view>
	</view>
</template>

<script>
	import api from "@/api/api.js";
	export default{
		props:{
			show:{
				type:Boolean,
				default:false
			},
			totalPrice:{
				type:[String,Number],
				default:0
			}
		},
		watch:{
			show:function(e){
				if(e){
					this.showt = e
					this.shows = e
				}else{
					this.shows = e
					setTimeout(()=>{this.showt = e},300)
				}
			},
			totalPrice:function(e){
				this.price = e
				this.dealCoupon()
			}
		},
		mounted() {
			this.getCoupon()
		},
		data(){
			return{
				couponData:[],
				shows:false,
				showt:false,
				price:0,
				o:null
			}
		},
		filters:{
			using:function(e){
				switch(e){
					case 0:
						return "立即使用"
					break;
					case 1:
						return "不使用"
					break;
					case 2:
						return "无法使用"
					break;
				}
			}
		},
		methods:{
			getCoupon:function(){
				const that = this;
				api.coupon.getCoupon().then(e=>{
					if(e.status == 200){
						console.log("getCoupon",e)
						that.couponData = e.data
						that.dealCoupon()
					}
				})
			},
			dealCoupon:function(){
				const that = this;
				let couponData = this.couponData
				let totalPrice = this.price;
				// console.log(totalPrice)
				let arr = [];
				for(let i of couponData){
					// console.log("use_min_price",i.use_min_price,totalPrice,parseFloat(i.use_min_price) <= parseFloat(totalPrice))
					i.using = 0
					if(parseFloat(i.use_min_price) > parseFloat(totalPrice)){
						i.using = 2
					}
					arr.push(i)
				}
				that.couponData = arr
			},
			use:function(id,using){
				let couponData = JSON.parse(JSON.stringify(this.couponData))
				if(using==0){
					couponData.forEach(e=>{if(e.id!=id && e.using==1){e.using = 0}})
					couponData.find(e=>e.id==id).using = 1
					console.log("couponData",couponData)
					this.$emit("output",couponData.find(e=>e.id==id))
				}else if(using==1){
					couponData.find(e=>e.id==id).using = 0
					this.$emit("output",null)
				}
				this.couponData = couponData
				this.close()
			},
			close:function(){
				this.$emit("close")
			}
		}
	}
</script>

<style>
	.hidden-window{
		opacity: 0;
		z-index: -1;
		position: relative;
	}
	.coupon-list-window{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #f5f5f5;
		border-radius: 16rpx 16rpx 0 0;
		z-index: 555;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	}
	.coupon-list-window.on{
		transform: translate3d(0, 0, 0);
	}
	.coupon-list-window .title{
		height: 124rpx;
		width: 100%;
		text-align: center;
		line-height: 124rpx;
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
	}
	.coupon-list-window .title .iconfont{
		position: absolute;
		right: 30rpx;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		font-size: 35rpx;
		color: #8a8a8a;
		font-weight: normal;
	}
	.coupon-list-window .coupon-list{
		margin: 0 0 50rpx 0;
		height: 550rpx;
		overflow: auto;
	}
	.coupon-list-window .coupon-list .item{
		width: 100%;
		height: 170rpx;
		margin-bottom: 16rpx;
	}
	.coupon-list-window .coupon-list .item .money{
		width: 240rpx;
		height: 100%;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.coupon-list-window .coupon-list .item .money.bg01{
		background-image: url();
	}
	.coupon-list-window .coupon-list .item .money.bg02{
		background-image: url();
	}
	.coupon-list-window .coupon-list .item .money view .num{
		font-size: 60rpx;
	}
	.coupon-list-window .coupon-list .item .money .pic-num{
		color: #fff;
		font-size: 24rpx;
	}
	.coupon-list-window .coupon-list .item .text{
		width: 450rpx;
		padding: 0 17rpx 0 24rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
	.coupon-list-window .coupon-list .item .text .condition{
		font-size: 30rpx;
		color: #282828;
		height: 93rpx;
		line-height: 93rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.coupon-list-window .coupon-list .item .text .condition .line-title{
		width: 90rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		background: #fff7f7;
		border: 1px solid #e83323;
		opacity: 1;
		border-radius: 20rpx;
		font-size: 20rpx;
		color: #E83323;
		margin-right: 12rpx;
	}
	.coupon-list-window .coupon-list .item .text .condition.using .line-title{
		border-color: #BBB;
		color: #bbb;
		background-color: #F5F5F5;
	}
	.coupon-list-window .coupon-list .item .text .data{
		font-size: 20rpx;
		color: #999;
		height: 76rpx;
	}
	.coupon-list-window .coupon-list .item .text .data .bnt{
		width: 136rpx;
		height: 44rpx;
		border-radius: 22rpx;
		font-size: 22rpx;
		text-align: center;
		line-height: 44rpx;
		color: #fff;
	}
	.coupon-list-window .coupon-list .item .text .data .bnt.using{
		background-color: #ccc;
	}
	.coupon-list-window .noCoupon{
		width: 414rpx;
		height: 336rpx;
		margin: 0 auto 50rpx auto;
	}
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
		z-index: 5;
	}
</style>
